<template>
	<view class="index">

		<view class="stastic">
			<view class="">
				<u--text text="收录黑房数量:" size="30"></u--text>
				<u-count-to :startVal="0" :endVal="countRoom" separator="," fontSize=50 bold = 'true' color="#ff0000"></u-count-to>
			</view>
			<view>

				<u--text text="收录黑中介数量：" size="30"></u--text>
				<u-count-to :startVal="0" :endVal="0" separator="," fontSize=50  bold = 'true'  color="#ff0000"></u-count-to>
			</view>
			<view>
				<u--text text="全网损失金额：" size="30"></u--text>
				<u-count-to :startVal="0" :endVal="countRoomMoney" separator="," fontSize=50  bold = 'true'  color="#ff0000"></u-count-to>
			</view>
		</view>

		<view class="content">
			<view class="rankHeader">
				<u--text text="🖤小区热榜" size="50" color="#fa3534"></u--text>
			</view>
			<view class="rankConent">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in hotList" :key="index" style="display: inline-block; width: 100%;">
						<view class="rankItem">
							<view class="rankItemCell">
								<u-cell :title="item.communityName">
										<u-avatar slot="icon" shape="square" size="35"
										:src="item.url"
										customStyle="margin: -3px 5px -3px 0; height: 50rpx;">
										</u-avatar>	
										
								</u-cell>
							</view>
							<view class="rankItemHot">
								<u-icon name="heart-fill"></u-icon>
								<u--text :text="item.comNum" size="30" color="#fa3534" style="justify-content: center;"></u--text>
							</view>
								
						</view>

					</u-list-item>
				</u-list>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		hotRank,
		countRoomMoney,
		countRoom
	} from '@/api/room/room.js'

	export default {
		data() {
			return {
				//统计值
				countRoom: 100,
				countRoomMoney: 100000,
				limit: 10,
				//热门
				hotList: [
					{comNum:"", communityName: "内容1", url: "https://ipfscn.top/data/heifangdong/img/logoH5.jpg"},
					{comNum:"", communityName: "内容2", url: "https://ipfscn.top/data/heifangdong/img/logoH5.jpg"},
					{comNum:"", communityName: "内容4", url: "https://ipfscn.top/data/heifangdong/img/logoH5.jpg"},
					{comNum:"", communityName: "内容5", url: "https://ipfscn.top/data/heifangdong/img/logoH5.jpg"},
					{comNum:"", communityName: "内容6", url: "https://ipfscn.top/data/heifangdong/img/logoH5.jpg"},
					{comNum:"", communityName: "内容7", url: "https://ipfscn.top/data/heifangdong/img/logoH5.jpg"},
					{comNum:"", communityName: "内容8", url: "https://ipfscn.top/data/heifangdong/img/logoH5.jpg"},
					{comNum:"", communityName: "内容9", url: "https://ipfscn.top/data/heifangdong/img/logoH5.jpg"},
					{comNum:"", communityName: "内容10", url: "https://ipfscn.top/data/heifangdong/img/logoH5.jpg"},
				],
			}
		},
		onLoad() {
			console.log("加载首页")
			hotRank().then(response => {
				if (response.code == 200) {
					if (response.data != null)
					if (response.data.length > 10) {
						this.hotList = response.data.slice(0, 10)
						this.hotList.forEach(item=>{
							item.url = "https://ipfscn.top/data/heifangdong/img/logoH5.jpg"
						})
					}
				}
			})
			countRoom().then(response => {
				if (response.code == 200) {
					this.countRoom = response.data
				}
			})
			countRoomMoney().then(response => {
				if (response.code == 200) {
					this.countRoomMoney = response.data
				}
			})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.stastic {
		margin-left: 50rpx;
	}
	.content {
		// margin-top: 20rpx;
		width: 100%;
		height: 970rpx;
		text-align: center;
		.rankHeader {		
			height: 100rpx;
			display: inline-block;
		}
		.rankConent {
			width: 100%;
			height: 850rpx;
			display: inline-block;
			.rankItem {
				width: 90%;
				display: inline-flex;
				justify-content: center;
				flex-direction: row;
				align-items: center;
				.rankItemCell {
					width: 90%;
				}
				.rankItemHot {
					width: 10%;
					
				}
			}
		}
	}

</style>